<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>提现记录</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <style>
        .content {
            margin: 0;
            padding: 0;
        }

        .myAmount {
            background: rgba(255, 255, 255, 1);
        }

        .row .col-50 {
            width: 50%;
            margin-left: 0;
        }

        .totalAmount {
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 4.5rem;
            background: rgba(255, 255, 255, 1);
            text-align: center;
            border-right: 0.02rem solid rgba(238, 238, 238, 1);
        }

        .withdrawAmount {
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 4.5rem;
            background: rgba(255, 255, 255, 1);
            text-align: center;
        }

        .WithdrawnAmount {
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: rgba(255, 255, 255, 1);
            text-align: center;
            width: 100%;
            height: 4.5rem;
            margin-top: 0.5rem;
        }

        .amount {
            height: 0.8rem;
            font-size: 1rem;
            font-family: MicrosoftYaHei-Bold;
            color: rgba(232, 57, 13, 1);
        }

        .WithdrawnAmount .amount {
            width: 100%;
            font-size: 1rem;
            font-family: MicrosoftYaHei-Bold;
            color: rgba(232, 57, 13, 1);
        }

        .header {
            height: 2rem;
            background: rgba(255, 255, 255, 1);
            border-top: 0.01rem solid rgba(238, 238, 238, 1);
            ;
        }

        .tableTital {
            text-align: center;
            border-top: 0.01rem solid rgba(238, 238, 238, 1);
            ;
            background: rgba(255, 255, 255, 1);
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            text-align: center;
            line-height: 2rem;
        }

        .item {
            height: 1.8rem;
            background: rgba(255, 255, 255, 1);
            border-top: 0.01rem solid rgba(238, 238, 238, 1);
            vertical-align: center;
        }

        .item .time {
            font-size: 0.65rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            text-align: center;
            line-height: 1.8rem;
        }

        .item .amount {
            font-size: 0.65rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            text-align: center;
            line-height: 1.8rem;
        }

        .item .applied {
            font-size: 0.65rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 147, 38, 1);
            text-align: center;
            line-height: 1.8rem;
        }

        .item .payments {
            font-size: 0.65rem;
            font-family: MicrosoftYaHei;
            color: rgba(74, 177, 243, 1);
            text-align: center;
            line-height: 1.8rem;
        }

        .item .paid {
            font-size: 0.65rem;
            font-family: MicrosoftYaHei;
            color: rgba(69, 192, 24, 1);
            text-align: center;
            line-height: 1.8rem;
        }
    </style>
</head>

<body>
    <!-- 你的html代码 -->
    <div class="page">
        <!--<header class="bar bar-nav">-->
            <!--<a class="button button-link button-nav pull-left" data-transition='slide-out'>-->
                <!--<span class="icon icon-left"></span>-->
                <!--返回-->
            <!--</a>-->
            <!--<h1 class="title">提现记录</h1>-->
        <!--</header>-->
        <nav class="bar bar-tab">
            <a class="tab-item" href="../index.html">
                <span class="icon icon-home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="../category.html">
                <span class="icon icon-menu"></span>
                <span class="tab-label">分类</span>
            </a>
            <a class="tab-item" href="../cart.html">
                <span class="icon icon-cart"></span>
                <span class="tab-label">购物车</span>
            </a>
            <a class="tab-item  active" href="../personal.html">
                <span class="icon icon-me"></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="row myAmount">
                <div class="col-50 totalAmount">
                    <span class="tipText">佣金总额(元)</span>
                    <span class="amount">7920.00</span>
                </div>
                <div class="col-50 withdrawAmount">
                    <span class="tipText">可提现金额(元)</span>
                    <span class="amount">1489.00</span>
                </div>
            </div>

            <div class="WithdrawnAmount">
                <span class="tipText">已提现金额(元)</span>
                <span class="amount">6431.00</span>
            </div>

            <div class="row header">
                <div class="col-33 tableTital">时间</div>
                <div class="col-33 tableTital">金额</div>
                <div class="col-33 tableTital">状态</div>
            </div>
            <div id="record-container">
                <div class="row item">
                    <div class="col-33 time">2017-12-27</div>
                    <div class="col-33 amount">22.00</div>
                    <div class="col-33 status applied">打款失败</div>
                </div>
                <div class="row item">
                    <div class="col-33 time">2017-12-27</div>
                    <div class="col-33 amount">22.00</div>
                    <div class="col-33 status payments">打款中</div>
                </div>
                <div class="row item">
                    <div class="col-33 time">2017-12-27</div>
                    <div class="col-33 amount">22.00</div>
                    <div class="col-33 status paid">已打款</div>
                </div>
            </div>
        </div>


        <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
        <script src="../js/index.js"></script>
</body>
<script>
    $(function () {
        getRecord("1")
    });

    function getRecord(userId) {
        $.getJSON(prefix + "/changeRecord/api/getChangeRecord/" + userId, function (data) {
            var itemList = data.withdrawRecord;
            var wallet = data.walletInfo;
            if (data.code == 0) {
                $(".WithdrawnAmount .amount").text(data.withdrawAmount);
                $(".withdrawAmount .amount").text(wallet.flAvailableAmount);
                $(".totalAmount .amount").text(wallet.flIncomeAmount);
				var paymentsHtml = "";
				var successHtml = "";
				var fialHtml = "";
                $.each(itemList, function (index, item) {
					if(item.flStatus == 0){
						paymentsHtml += '<div class="row item">'+
											'<div class="col-33 time">'+item.flChangeTime+'</div>'+
											'<div class="col-33 amount">'+item.flChangeAmount+'</div>'+
											'<div class="col-33 status payments">打款中</div>'+
										'</div>';
					}else if(item.flStatus == 1){
						successHtml += '<div class="row item">'+
											'<div class="col-33 time">'+item.flChangeTime+'</div>'+
											'<div class="col-33 amount">'+item.flChangeAmount+'</div>'+
											'<div class="col-33 status paid">已打款</div>'+
										'</div>';
					}else  if(item.flStatus == -1){
						fialHtml += '<div class="row item">'+
											'<div class="col-33 time">'+item.flChangeTime+'</div>'+
											'<div class="col-33 amount">'+item.flChangeAmount+'</div>'+
											'<div class="col-33 status applied">打款失败</div>'+
										'</div>';
					}					
                });
				$("#record-container").html(successHtml+paymentsHtml+fialHtml);

            }
        })
    }
</script>

</html>
